@import "../../../lib/style/mixins.less";

#left-line(@color, @position) {
    &:@{position} {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 1px;
        transform: scaleX(0.5);
        transform-origin: 0 50%;
        border-left: 1px solid @color;
        z-index: @before-line-z-index;
    }
}

#before-line(@color) {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 1px;
        transform: scaleY(0.5);
        transform-origin: 0 0;
        border-top: 1px solid @color;
        z-index: @before-line-z-index;
    }
}

#after-line(@color) {
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        height: 2rpx;  
        transform: scaleY(0.5);
        transform-origin: 0 100%;
        background-color: @color;
        border-bottom: 1px solid @color;
    }
}

#before-line(outer, @color) {
    &:before {
        content: '';
        position: absolute;
        bottom: 100%;
        right: 0;
        left: 0;
        height: 1px;
        transform: scaleY(0.5);
        transform-origin: 0 100%;
        border-top: 1px solid @color;
        z-index: @before-line-z-index;
    }
}

#after-line(outer, @color) {
    &:after {
        content: '';
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        height: 1px;
        transform: scaleY(0.5);
        transform-origin: 0 0;
        border-bottom: 1px solid @color;
    }
}

#right-line(@color) {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        transform: scaleX(0.5);
        transform-origin: 100% 50%;
        background-color: @color;
    }
}